<!-- 表格列 -->
<template>
  <el-table-column :prop="prop" :label="label" :width="width" :fixed="fixed">
    <template #default="{ row, $index }">
      <template v-if="editRowIndexArr.includes($index)">
        <div>
          <component
            :is="component"
            v-model="row[prop]"
            v-bind="attrs"
            style="width: 100%"
            @change="(val) => (change ? change(val, row) : '')"
          ></component>
        </div>
      </template>
      <template v-else>
        <template v-if="render">
          <div @click="clickHandle(row)" :class="{ 'view-link': isOpenView }">
            <VNode :content="render(row)" />
          </div>
        </template>
        <template v-else-if="slot">
          <div @click="clickHandle(row)" :class="{ 'view-link': isOpenView }">
            <slot name="slot" :row="row"></slot>
          </div>
        </template>
        <template v-else-if="children?.length">
          <TableColumn
            v-for="(childItem, childIndex) in children"
            :key="childIndex"
            :prop="childItem.prop"
            :label="childItem.label"
            :width="childItem.width"
            :fixed="childItem.fixed"
            :render="childItem.render"
            :slot="childItem.slot"
            :children="childItem.children"
          ></TableColumn>
        </template>
        <template v-else>
          <div>
            {{ row[prop] }}
          </div>
        </template>
      </template>
    </template>
  </el-table-column>
</template>
<script setup lang="ts">
import VNode from '@u/VNode';
import TableColumn from '@com/Table/src/TableColumn.vue';
import type { TableConfigItem } from '@com/Table/index';
const props = defineProps({
  prop: {
    type: String,
    require: true,
  },
  label: {
    type: String,
    require: true,
  },
  isOpenView: {
    //点击是否能打开详情弹窗
    type: Boolean,
    default: false,
  },
  width: {
    type: [String, Number],
  },
  fixed: {
    type: [String, Boolean],
    default: false,
  },
  render: {
    type: Function,
  },
  slot: {
    type: String,
  },
  children: {
    type: Array<TableConfigItem>,
  },

  editRowIndexArr: {
    // 编辑状态行索引
    type: Array<number>,
    default: () => [],
  },
  component: {
    type: [String, Object],
  },
  attrs: {
    type: Object,
  },
  change: {
    type: Function,
  },
});
const emit = defineEmits(['clickHandle']);

//点击方法
const clickHandle = <T,>(row: T) => {
  emit('clickHandle', props, row);
};
</script>
